<template>
	<view class="container">
		<view class="section">
			<text class="section-title">维修信息</text>
			<view class="info-item">
				<view class="info-label">维修单号：</view>
				<view class="info-value">3535252</view>
			</view>
			<view class="info-item">
				<view class="info-label">车主姓名：</view>
				<view class="info-value">张三</view>
			</view>
			<view class="info-item">
				<view class="info-label">联系方式：</view>
				<view class="info-value">1993829282</view>
				<image src="/static/电话.svg" class="phone-icon" @click="makePhoneCall" />
			</view>
			<view class="info-item">
				<text class="info-label">维修方式：</text>
				<text class="info-value">上门取车/到店维修</text>
			</view>
			<view class="info-item">
				<text class="info-label">取车位置：</text>
				<text class="info-value">山阳区32号</text>
				<image src="/static/位置.svg" class="map-icon" @click="showMap" />
			</view>
			<view class="info-item">
				<text class="info-label">预约时间：</text>
				<text class="info-value">2022-11-10 11:00</text>
			</view>
			<view class="info-item">
				<text class="info-label">提交时间：</text>
				<text class="info-value">2022-11-08 12:34</text>
			</view>
			<view class="info-item" v-show="true">
				<text class="info-label">到场时间：</text>
				<text class="info-value">2022-11-08 12:34</text>
			</view>
		</view>

		<view class="section">
			<text class="section-title">车辆信息</text>
			<view class="info-item">
				<view class="info-label">车辆类型：</view>
				<view class="info-value">大客车</view>
			</view>
			<view class="info-item">
				<view class="info-label">车牌号：</view>
				<view class="info-value">豫J45323</view>
			</view>
			<view class="info-item">
				<view class="info-label">整车照片：</view>
				<image src="/static/logo.png" class="car-image" />
			</view>
			<view class="info-item">
				<text class="info-label">维修部位照片：</text>
				<view class="photo-group">
					<image src="/static/logo.png" class="part-image" />
					<image src="/static/logo.png" class="part-image" />
					<image src="/static/logo.png" class="part-image" />
				</view>
			</view>
		</view>

		<button class="confirm-button" @click="confirmArrival">确认到场</button>
		<button v-show="true" class="confirm-button" style="background-color: darkgray;"
			@click="confirmArrival">已到场</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	const makePhoneCall = () => {
		// uni.makePhoneCall({
		// 	phoneNumber: "18539132713",
		// });
		uni.showToast({
			title: "拨打电话功能暂未开放",
			icon: "none",
		});
	};

	const showMap = () => {
		uni.openLocation({
			latitude: 34.3217,
			longitude: 113.6244,
			address: "山阳区32号",
		});
	};

	const confirmArrival = () => {
		uni.showToast({
			title: "确认到场成功",
			icon: "success",
		});
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.section {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: #333333;
		margin-right: 10rpx;
		margin-top: 20rpx;
	}

	.info-value {
		font-size: 28rpx;
		color: #666666;
		flex: 1;
		margin-top: 20rpx;
	}

	.phone-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
		margin-right: 160rpx;
	}

	.map-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
		margin-right: 160rpx;
	}

	.car-image {
		width: 200rpx;
		height: 150rpx;
		margin-left: 10rpx;
	}

	.photo-group {
		display: flex;
		margin-left: 10rpx;
	}

	.part-image {
		width: 120rpx;
		height: 90rpx;
		margin-left: 10rpx;
	}

	.confirm-button {
		width: 600rpx;
		height: 80rpx;
		background-color: #007aff;
		color: #ffffff;
		font-size: 32rpx;
		border: none;
		outline: none;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
</style>